<template>
  <div class="table-data">
    <el-form
      :rules="rules"
      ref="ruleForm"
      :model="form"
      label-width="120px"
      size="small"
      class="form-box"
    >
      <p class="title">基础信息设置</p>
      <el-form-item label="所属商家" prop="parent_id">
        <el-select v-model="form.parent_id" clearable placeholder="请选择所属商家">
          <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="门店名称" prop="name">
        <el-input type="text" v-model="form.name" placeholder="请输入门店名称"></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="user">
        <el-input type="text" v-model="form.user " placeholder="请输入联系人"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input type="text" maxlength="11" v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="所在城市">
        <Region @bindSendAddress="propAddress" :address="address"></Region>
      </el-form-item>
      <el-form-item label="详细地址" prop="detail">
        <el-input type="text" v-model="form.detail"></el-input>
      </el-form-item>
      <el-form-item label="地图选点" prop="application">
        <!-- <el-input id="keyword" name="input" placeholder="请输入您要定位的位置" v-model="form.point"></el-input> -->
        <Map @bindSendMap="propMap" :point="form.point"></Map>
      </el-form-item>
      <el-form-item label="营业时间">
        <el-time-select
          placeholder="起始时间"
          v-model="startTime"
          :picker-options="{
            start: '08:00',
            step: '00:15',
            end: '24:00'
          }">
        </el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="endTime"
          :picker-options="{
            start: '08:00',
            step: '00:15',
            end: '24:00',
            minTime: startTime
          }">
        </el-time-select>
      </el-form-item>
      <p class="title">登录信息设置</p>
      <el-form-item label="账号" prop="username">
        <el-input type="text" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="text" v-model="form.password"></el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="cancel" size="small">取消</el-button>
      <el-button @click="submitFormAdd('ruleForm')" type="primary" size="small">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
import Map from "@/components/map/index.vue";
import Region from "@/components/region/index.vue";
import businessApi from "@/api/business";
import isMobileNumber from "@/api/formValidation.js";
@Component({
  components: {Map,Region}
})
export default class storeAddDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  check:boolean = true//防重复提交
  startTime:any = '08:00'//营业时间
  endTime:any= '22:00'//营业时间
  @Provide() advertiser: any = [];//广告商
  @Provide() businessList: any = [];//商家
  @Provide() dateTime:any=["",""]//营业时间 
  @Provide() address: any=[];
  @Provide() form:any={
    id:'',
    user:'',
    province:'',
    city:'',
    district:'',
    detail:'',
    phone:'',
    username:'',
    password:'',
    parent_id:'',
    point:'',
    start_time:'',
    end_time:''
  };
  @Provide() rules: any = {
    name: [{ required: true, message: "请输入门店名称", trigger: "blur" }],
    user: [{ required: true, message: "请输入联系人", trigger: "blur" }],
    detail: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
    phone: [{ required: true, message: "请输入联系电话", trigger: "blur" },{ pattern: /^[0-9]{6,11}$/,message: '请输入正确号码'}],
    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    parent_id: [{ required: true, message: "请选择所属商家", trigger: "change" }]
  };
  @Provide() searchMap:{
    keyword: string,
    cate_id: string,
    is_child: any,
  }={
    keyword: "",
    cate_id: "",
    is_child: 0
  }
  // 取消
  cancel(){
    this.$router.push({
      path:'/storeList'
    })
  }
  // 提交
  submitFormAdd(formName: any) {
    (this.$refs[formName] as any).validate((valid: boolean) => {
      if (valid) {
        this.form.start_time=this.startTime;
        this.form.end_time=this.endTime;
        if(this.endTime!==''&&this.startTime!=='') {
          if(this.check) {
            let _this = this
            _this.check = false
            businessApi.saveStore(_this.form)
            .then((res: any) => {
              if(res.data.status){
                _this.$message({
                  message: '操作成功',
                  type: "success"
                });
                _this.$router.push({
                  path:'/storeList'
                })
                _this.$emit("loadData")
                setTimeout(function(){
                  _this.check = true
                },3000)
              }else{
                _this.$message({
                  message: res.data.msg,
                  type: "error"
                });
                _this.check = true
              }
            });
          }
        }else {
          this.$message({
            message: '请输入营业时间',
            type: "error"
          });
        }
        
        
      }
    });
  }
  //省事级联组件传递过来的值
  propAddress(address:any){
    this.form.province = address[0];
    this.form.city = address[1];
    this.form.district = address[2];
  }
  //地图组件传递过来的值
  propMap(point:any){
    this.form.point = point;
  }
  loadData(){
    businessApi.businessList(1,99999,this.searchMap)
    .then((res: any) => {
      this.businessList = res.data.data.list;
    });
  }
  created() {
    this.loadData()
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer{
  padding-left: 50px
}
.form-box {
  .el-input,
  .el-select {
    width: 200px !important;
  }
  .title{
    line-height: 60px;
    font-weight: bold;
    font-size: 16px;
  }
}
.avatar-uploader{
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
